<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<%
    String sel1 = request.getParameter("sel1");
    String sel2 = request.getParameter("sel2");

    String jhlx = java.net.URLDecoder.decode(request.getParameter("jhlx"), "utf-8");//request.getParameter("jhlx");
    String rclx = java.net.URLDecoder.decode(request.getParameter("rclx"), "utf-8");
    String pclx = java.net.URLDecoder.decode(request.getParameter("pclx"), "utf-8");
    String bfsj = java.net.URLDecoder.decode(request.getParameter("bfsj"), "utf-8");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>

<div id="container"></div>


<script type="text/javascript">

    $().ready(function () {


        //数据初始化
        var chart;
        joy.postJSON("/html/ps/psquery/findRCEdu.ht", function (resultObject) {
            var list1 = resultObject.return1;//resultObject.returnY; //计划类型一
            var list2 = resultObject.return2;//resultObject.returnZ; //计划类型二
            var list3 = resultObject.return3;//resultObject.returnY; //计划类型三
            var list4 = resultObject.return4;//resultObject.returnZ; //计划类型四

            test(list1,list2,list3,list4);
        });



        function test(list1,list2,list3,list4) {
            chart = Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '2014 某网站各浏览器浏览量占比'
                },
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '浏览器访问量占比',
                    data: [
                        ['博士',   45.0],
                        ['硕士',   26.8],
                        ['学士',    8.5],
                        ['其他',   0.7]
                    ]
                }]


            });
        }
    })


</script>
</body>
</html>
